import 'package:cached_network_image/cached_network_image.dart';
/**
 *  description: 图片全屏浏览器
 *  //https://blog.csdn.net/iotjin/article/details/104392812
    //https://github.com/iotjin/jh_flutter_demo
    //https://github.com/826327700/flutter_plugins_demo
    https://blog.csdn.net/gpf1320253667/article/details/111086479
 */

import 'package:flutter/material.dart';
import 'package:flutter_base_library/utils/our_screen_utils.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';


const Color _selColor = Colors.white;
const Color _otherColor = Colors.grey;

class FadeRoute extends PageRouteBuilder {
  final Widget page;

  FadeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
            opacity: animation,
            child: child,
          ),
        );
}

class OurPictureBrowser extends StatefulWidget {
  List imgDataArr = [];
  int index;
  String heroTag;
  PageController controller;
  GestureTapCallback onLongPress;
  bool isHiddenClose;
  bool isHiddenTitle;

  OurPictureBrowser({
    Key key,
    @required this.imgDataArr,
    this.index = 0,
    this.onLongPress,
    this.controller,
    this.heroTag,
    this.isHiddenClose = false,
    this.isHiddenTitle = false,
  }) : super(key: key) {
    controller = PageController(initialPage: index);
  }

  @override
  _OurPictureBrowserState createState() => _OurPictureBrowserState();
}

class _OurPictureBrowserState extends State<OurPictureBrowser> {
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    currentIndex = widget.index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: _body(),
    );
  }

  Widget _body() {
    return Stack(
      children: <Widget>[

        Positioned(
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          child: Container(
              child: GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            onLongPress: () {
              widget.onLongPress();
            },
            child: PhotoViewGallery.builder(
              scrollPhysics: const BouncingScrollPhysics(),

              builder: (BuildContext context, int index) {
                var _imgURL = widget.imgDataArr[index];
                ImageProvider _picture = _imgURL.startsWith('http')
                    ? CachedNetworkImageProvider(_imgURL)
                    : AssetImage(_imgURL);



                return PhotoViewGalleryPageOptions(
                  imageProvider: _picture,
                  heroAttributes: widget.heroTag != null
                      ? PhotoViewHeroAttributes(tag: widget.heroTag)
                      : null,
                  initialScale: PhotoViewComputedScale.contained,
                  minScale: PhotoViewComputedScale.contained,
                  maxScale: PhotoViewComputedScale.covered * 2,
                );
              },
              itemCount: widget.imgDataArr.length,
              // loadingChild: Container(),

              backgroundDecoration: null,
              pageController: widget.controller,
              enableRotation: false,
              onPageChanged: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
            ),
          )),
        ),

        Positioned(
          top: OurScreenUtils.topSafeHeight + 20,
          height: 30,
          width: MediaQuery.of(context).size.width,
          child: Center(
            child: Text("${currentIndex + 1}/${widget.imgDataArr.length}",
                style: TextStyle(color: Colors.white, fontSize: 16)),
          ),
        ),

        Positioned(
          top: OurScreenUtils.topSafeHeight + 20,
          right: 10,
          height: 30,
          child: IconButton(
            padding: EdgeInsets.all(0),
            icon: Icon(
              Icons.close,
              size: 30,
              color: Colors.white,
            ),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ),

        SafeArea(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: widget.imgDataArr.length == 1 ? 0 : 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(
                  widget.imgDataArr.length,
                  (i) => GestureDetector(
                    child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 3.5),
                        child: CircleAvatar(
//                      foregroundColor: Theme.of(context).primaryColor,
                          radius: 3.5,
                          backgroundColor:
                              currentIndex == i ? _selColor : _otherColor,
                        )),
                  ),
                ).toList(),
              ),
            ),
          ),
        )
      ],
    );
  }
}
